<template>
  <div>
    <Header />
    <router-view></router-view>
    <!-- 
      Footer组件在登录和注册的路由下是不展示,需要进行条件渲染
     -->
    <Footer v-if="FooterIsShow" />
  </div>
</template>

<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
export default {
  name: "App",
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      FooterShowList: ["Register", "Login"],
    };
  },
  computed: {
    //Footer的条件渲染,使用计算属性进行计算,可以减少模板中的代码量
    //Footer是否展示的 计算属性 返回布尔值
    FooterIsShow() {
      //第一种写法,直接一个个的判断
      // return this.$route.name !== "Login" && this.$route.name !== "Register";
      //第二种写法,把不展示footer的收集到数组中 作为白名单,然后判断当前路由在不在白名单中
      // return !this.FooterShowList.includes(this.$route.name);
      //第三种写法,根据路由携带的元信息判断是否需要展示
      return !this.$route.meta.FooterIsHidden;
    },
  },
};
</script>

<style></style>
